<template>
  <div>
    <div ref="chart4" class="chart4"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart4 = ref(null)
const options = ref({
  legend: {
    data: ['宝宝', '正常值下限', '正常值', '正常值上限']
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    //x轴线是否显示
    axisLine: {
      show: true
    },
    // //x轴刻度线是否显示
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
  
    //y轴是否显示
    axisLine: {
      show: true,
      // 最小值
        min:45,
        //最大值
        max:85,
        //间隔值
        interval:5,
    },
    //y轴刻度线是否显示
    axisTick: {
      show: false
    },
   
  },
  series: [
     {
      name: '宝宝',
      type: 'line',
      stack: 'Total',
      data: []
    },
    {
      name: '正常值下限',
      type: 'line',
      stack: 'Total',
      data: [52, 55, 59, 61, 63, 65, 66, 68,69,71,74,75],
      visible: true
    },
    {
      name: '正常值',
      type: 'line',
      stack: 'Total',
      data: [55,60,63,65,67,69,70,72,73,75,78,79],
      visible: true
    },
    {
      name: '正常值上限',
      type: 'line',
      stack: 'Total',
      data: [57, 62, 65, 66, 68, 70, 71, 73, 75, 78, 83, 84],
      visible: true
    },
    // {
    //   name: '宝宝',
    //   type: 'line',
    //   stack: 'Total',
    //   data: [],
    //   smooth: true
    // },
    // {
    //   name: '正常值下限',
    //   type: 'line',
    //   stack: 'Total',
    //   data: [54, 57, 59, 62, 64, 66, 67, 68, 68, 71, 74, 75],
    //   smooth: true
    // },
    // {
    //   name: '正常值上限',
    //   stack: 'Total',
    //   data: [54, 75, 59, 62, 64, 86, 67, 68, 28, 61, 24, 75],
    //   smooth: true
    // },
    // {
    //   name: '正常值',
    //   type: 'line',
    //   stack: 'Total',
    //   data: [56, 57, 58, 60, 61, 62, 66, 67, 69, 72, 73, 73],
    //   smooth: true
    // },
    // {
    //   name: '正常值上限',
    //   type: 'line',
    //   stack: 'Total',
    //   data: [58, 63, 65, 65, 65, 66, 69, 69, 73, 76, 82, 83],
    //   smooth: true
    // }
  ]
})
onMounted(() => {
  const myChart4 = echarts.init(chart4.value)
  myChart4.setOption(options.value)
  window.onresize = function () {
    myChart4.resize()
  }
})
</script>

<style scoped lang="scss">
.chart4 {
  width: 375px;
  height: 450px;
}
</style>
